<template>
    <section>
        <div class="title">家谱</div>
        <div class="org-tree-container">
            <div class="org-tree collapsable">
                <zupu :list='zupu' :isHavaDie='isHavaDie'></zupu>
            </div>
        </div>
        <!-- <div class="text-center"></div> -->
    </section>
</template>
<script>
import zupu from'../common/puzu.vue'
export default {
    name: "index",
    data() {
        return {
            isHavaDie:false,
              zupu: [
                {
                    name: "刘大浪",
                    parents: false,
                    child: [
                        {
                            name: "刘信",
                            parents: true,
                            child: [
                                {
                                    name: "刘大傻",
                                    parents: true,
                                    child: []
                                }
                            ]
                        },
                        {
                            name: "刘思",
                            parents: true,
                            child: [
                                {
                                    name: "刘树",
                                    parents: true,
                                    child: []
                                },
                                {
                                    name: "刘洋",
                                    parents: true,
                                    child: [
                                        {
                                            name: "刘飒",
                                            parents: true,
                                            child: []
                                        }
                                    ]
                                },
                                {
                                    name: "刘湾二",
                                    parents: true,
                                    child: []
                                }
                            ]
                        }
                    ]
                }
            ]
          
        };
    },
    components:{
        zupu
    },
    mounted() {},
    methods:{
        changeList(){
            this.zupu[0].parents = true;
            console.log(this.zupu)
             let topData = [{
                'child':[],
                'name':'',
                'parents':false,
            }];
            topData[0].child = this.zupu;
            this.zupu = topData;
        },
        changeIsDie(){
            this.isHavaDie = true;
        }
    }
};
</script>
<style scoped>
.org-tree-container {
    display: inline-block;
    padding: 15px;
    background-color: #fff;
}
.org-tree {
    display: table;
    text-align: center;
}
.org-tree:after,
.org-tree:before {
    content: "";
    display: table;
}
.org-tree:after {
    clear: both;
}
</style>


<style>
.org-tree {
    display: table;
    text-align: center;
}
.org-tree:after,
.org-tree:before {
    content: "";
    display: table;
}
.org-tree:after {
    clear: both;
}
.org-tree>section > .org-tree-node {
    padding-top: 0;
}
.org-tree>section > .org-tree-node:after {
    border-left: 0;
}
</style>